<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layui/css/global.css" media="all">
    <link rel="stylesheet" href="/static/layer-v3.1.1/layer/theme/default/layer.css" media="all">
    <link rel="stylesheet" href="/static/jujiu/var.css" media="all">
    <title>Jujiu</title>
    <link rel="icon" href="/static/varyag.ico" type="image/x-icon">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        var clusterInfoUrl = "api/v1/cluster/info?cid="

        window.onload = function () {
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = handleHzClusterInfoRsp;
            xhr.open("GET", clusterInfoUrl + "Hangzhou", true)
            xhr.send();
            // 轮询
            let timer = window.setInterval(function () {
                xhr = new XMLHttpRequest();
                xhr.onreadystatechange = handleHzClusterInfoRsp;
                xhr.open("GET", clusterInfoUrl + "Hangzhou", true)
                xhr.send();
            }, 3 * 60 * 1000);

            xhr1 = new XMLHttpRequest();
            xhr1.onreadystatechange = handleClusterInfoRsp;
            xhr1.open("GET", clusterInfoUrl + "Frankfurt", true)
            xhr1.send();
            // 轮询
            window.setInterval(function () {
                xhr1 = new XMLHttpRequest();
                xhr1.onreadystatechange = handleClusterInfoRsp;
                xhr1.open("GET", clusterInfoUrl + "Frankfurt", true)
                xhr1.send();
            }, 3 * 60 * 1000)
        }

        function handleHzClusterInfoRsp() {
            if (xhr.readyState == 4) {// 4 = "loaded"
                if (xhr.status == 200) {// 200 = OK
                    let responseText = xhr.responseText;
                    // responseText = '{"etcd":{"endpoints":["http://10.18.0.57:2379","http://10.18.0.58:2379","http://10.18.0.59:2379"]},"nodes":[{"name":"varyag/varyag@10.18.0.59","address":"10.18.0.59:9200"},{"name":"varyag/varyag@10.18.0.57","address":"10.18.0.57:9200"},{"name":"varyag/varyag@10.18.0.58","address":"10.18.0.58:9200"}]}'
                    if (isJson(responseText)) {
                        let clusterInfo = JSON.parse(responseText);
                        let etcd = clusterInfo.etcd;
                        let endpoints = etcd.endpoints;
                        let nodes = clusterInfo.nodes;
                        let cid = clusterInfo.cid;
                        var etcdContext = ''
                        var varyagContext = ''
                        for (j = 0, len = nodes.length; j < len; j++) {
                            varyagContext = varyagContext + viewVaryag(cid, j + 1, nodes[j].name, nodes[j].address, nodes[j].sessionNum)
                        }
                        $(".hangzhou #cid_varyag_info").html(varyagContext)
                        for (i = 0, len = endpoints.length; i < len; i++) {
                            etcdContext = etcdContext + viewEtcd(cid, i + 1, endpoints[i])
                        }
                        $(".hangzhou #cid_etcd_info").html(etcdContext)


                    } else {
                        console.log("not json data,parse failed!", responseText)
                    }

                } else {
                    layer.msg("error")
                }
            }
        }

        function handleClusterInfoRsp(aa) {
            if (xhr1.readyState == 4) {// 4 = "loaded"
                if (xhr1.status == 200) {// 200 = OK
                    let responseText = xhr1.responseText;
                    // responseText = '{"etcd":{"endpoints":["http://10.18.0.57:2379","http://10.18.0.58:2379","http://10.18.0.59:2379"]},"nodes":[{"name":"varyag/varyag@10.18.0.59","address":"10.18.0.59:9200"},{"name":"varyag/varyag@10.18.0.57","address":"10.18.0.57:9200"},{"name":"varyag/varyag@10.18.0.58","address":"10.18.0.58:9200"}]}'
                    if (isJson(responseText)) {
                        let clusterInfo = JSON.parse(responseText);
                        let etcd = clusterInfo.etcd;
                        let endpoints = etcd.endpoints;
                        let nodes = clusterInfo.nodes;
                        let cid = clusterInfo.cid;

                        var etcdContext = ''
                        var varyagContext = ''
                        for (j = 0, len = nodes.length; j < len; j++) {
                            varyagContext = varyagContext + viewVaryag(cid, j + 1, nodes[j].name, nodes[j].address, nodes[j].sessionNum)
                        }
                        $(".frankfurt #cid_varyag_info").html(varyagContext)
                        for (i = 0, len = endpoints.length; i < len; i++) {
                            etcdContext = etcdContext + viewEtcd(cid, i + 1, endpoints[i])
                        }
                        $(".frankfurt #cid_etcd_info").html(etcdContext)

                    } else {
                        console.log("not json data,parse failed!", responseText)
                    }

                } else {
                    layer.msg("error")
                }
            }
        }

        function viewVaryag(cid, index, name, address, num) {
            if ("Frankfurt" == cid) {
                $(".frankfurt #temp_cid_info_varyag #idx").html(index);
                $(".frankfurt #temp_cid_info_varyag #name").html(name);
                $(".frankfurt #temp_cid_info_varyag #addr").html(address);
                $(".frankfurt #temp_cid_info_varyag #num").html(num);
                return $(".frankfurt #temp_cid_info_varyag").html()
            } else {
                $(".hangzhou #temp_cid_info_varyag #idx").html(index);
                $(".hangzhou #temp_cid_info_varyag #name").html(name);
                $(".hangzhou #temp_cid_info_varyag #addr").html(address);
                $(".hangzhou #temp_cid_info_varyag #num").html(num);
                return $(".hangzhou #temp_cid_info_varyag").html()
            }
        }

        function viewEtcd(cid, index, name) {
            if ("Frankfurt" == cid) {
                $(".frankfurt #temp_cid_info_etcd #idx").html(index)
                $(".frankfurt #temp_cid_info_etcd #endpoint").html(name)
                return $(".frankfurt #temp_cid_info_etcd").html()
            } else {
                $(".hangzhou #temp_cid_info_etcd #idx").html(index)
                $(".hangzhou #temp_cid_info_etcd #endpoint").html(name)
                return $(".hangzhou #temp_cid_info_etcd").html()
            }

        }

        function state_Change_JSON_Handle() {
            if (xhr.readyState == 4) {// 4 = "loaded"
                if (xhr.status == 200) {// 200 = OK
                    if (isJson(xhr.responseText)) {
                        let parse = JSON.parse(xhr.responseText);
                        console.log(parse);
                        view(xhr.responseText)
                        layer.open({
                            title: '设备信息',
                            content: $("#device_info_temp").html()
                        })
                    } else {
                        layer.msg(xhr.responseText)
                    }
                } else {
                    layer.msg("error")
                }
            }
        }

        function state_Change() {
            if (xhr.readyState == 4) {// 4 = "loaded"
                if (xhr.status == 200) {// 200 = OK
                    layer.msg(xhr.responseText)
                } else {
                    layer.msg("error")
                }
            }
        }

        function isJson(str) {
            if (typeof str == 'string') {
                try {
                    JSON.parse(str);
                    return true;
                } catch (e) {
                    return false;
                }
            }
        }
    </script>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs6 hangzhou">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-weight: 400;">集群简介-国内</legend>
        </fieldset>
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <blockquote class="layui-elem-quote layui-quote-nm">
                            <h3>etcd集群</h3>
                            <div id="cid_etcd_info">
                            </div>
                        </blockquote>
                        <blockquote class="layui-elem-quote layui-quote-nm">
                            <h3>varyag集群</h3>
                            <div id="cid_varyag_info">
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-titfle" style="margin-top: 20px;">
            <legend style="font-weight: 400;">功能列表</legend>
        </fieldset>
    </div>
    <div class="layui-col-xs6 frankfurt">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-weight: 400;">集群简介-海外</legend>
        </fieldset>
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <blockquote class="layui-elem-quote layui-quote-nm">
                            <h3>etcd集群</h3>
                            <div id="cid_etcd_info">
                            </div>
                        </blockquote>
                        <blockquote class="layui-elem-quote layui-quote-nm">
                            <h3>varyag集群</h3>
                            <div id="cid_varyag_info">
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-weight: 400;">功能列表</legend>
        </fieldset>
    </div>

</div>


<!--
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设备调度</div>
                <div class="layui-card-body">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input id="deviceId" type="tel" name="phone" lay-verify="required|phone"
                                   placeholder="请输入设备号"
                                   autocomplete="off" class="layui-input" style="height: 30px">
                        </div>
                        <button onclick="mv2Frk()" type="button" class="layui-btn layui-btn-warm"
                                style="height: 30px; line-height: 30px">国内到海外
                        </button>
                        <button onclick="mv2Dev()" type="button" class="layui-btn layui-btn-warm"
                                style="height: 30px; line-height: 30px">正式到测试
                        </button>
                        <button onclick="mvF2H()" type="button" class="layui-btn layui-btn-warm"
                                style="height: 30px; line-height: 30px">海外到国内
                        </button>
                        <button onclick="mvDev2Real()" type="button" class="layui-btn layui-btn-warm"
                                style="height: 30px; line-height: 30px">测试到正式
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">固件删除</div>
                <div class="layui-card-body">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input id="romVer" type="tel" name="phone" lay-verify="required|phone"
                                   placeholder="请输入固件版本号"
                                   autocomplete="off" class="layui-input" style="height: 30px">
                        </div>
                        <button onclick="delRom()" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i
                                    class="layui-icon"></i> 删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">基本信息查询</div>
                <div class="layui-card-body">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input id="query_device_id" type="tel" name="phone" lay-verify="required|phone"
                                   placeholder="请输入设备号"
                                   autocomplete="off" class="layui-input" style="height: 30px">
                        </div>
                        <button onclick="dquery()" type="button" class="layui-btn layui-btn-danger"
                                style="height: 30px; line-height: 30px">查询
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">数据同步</div>
                <div class="layui-card-body">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input id="data_deviceId" type="tel" name="phone" lay-verify="required|phone"
                                   placeholder="请输入设备号"
                                   autocomplete="off" class="layui-input" style="height: 30px">
                        </div>
                        <button onclick="h2f()" type="button" class="layui-btn layui-btn-checked"
                                style="height: 30px; line-height: 30px">国内2海外
                        </button>
                        <button onclick="r2d()" type="button" class="layui-btn layui-btn-checked"
                                style="height: 30px; line-height: 30px">国内2测试
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
-->
<!--
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="font-weight: 400;">其他功能</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">XXXX</div>
                <div class="layui-card-body">
                    1<br>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">22222</div>
                <div class="layui-card-body">
                    2<br>
                </div>
            </div>
        </div>
    </div>
</div>
-->
<!--
<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">

        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
        </div>
    </div>
</div>
</div>
<div class="layui-row">
    <div class="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
        <div class="grid-demo">3/12</div>
    </div>
</div>
-->
<div hidden id="template">
    <div class="hangzhou">
        <div id="temp_cid_info_varyag">
            <p>
                <span class="span-header" id="idx">10</span>
                <span class="span-normal" id="name">name</span>
                <span class="span-normal" id="addr">value</span>
                <span class="span-normal" id="num">0</span>
            </p>

        </div>
        <div id="temp_cid_info_etcd">
            <p>
                <span class="span-header" id="idx">1</span>
                <span class="span-normal" id="endpoint">url</span>
            </p>
        </div>
    </div>
    <div class="frankfurt">
        <div id="temp_cid_info_varyag">
            <p>
                <span class="span-header" id="idx">10</span>
                <span class="span-normal" id="name">name</span>
                <span class="span-normal" id="addr">value</span>
                <span class="span-normal" id="num">0</span>
            </p>

        </div>
        <div id="temp_cid_info_etcd">
            <p>
                <span class="span-header" id="idx">1</span>
                <span class="span-normal" id="endpoint">url</span>
            </p>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/jquery/jquery.js"></script>
<script src="/static/layer-v3.1.1/layer/layer.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>